<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
</ul>

<script>
// Array.from()将类数组对象、伪数组转成真正的数组

// 元素集合（伪数组）
let lis = document.querySelectorAll('.list li');
// console.log( lis );// NodeList(3) [li, li, li]
// console.log( Array.isArray(lis) );// false
// lis.push(123);// 报错

// let arr = [];
// for (var i = 0; i < lis.length; i++) {
//     arr.push(lis[i]);
// }
// console.log( arr );

// lis = Array.from(lis);
// console.log( Array.isArray(lis) );// true
// lis.push(123);
// console.log( lis );// [li, li, li, 123]

// 类数组对象
let likeArray = {
    0: 'a1',
    1: 'a2',
    2: 'a3',
    3: 'a4',
    length: 4
}
// console.log( likeArray );// {...}
// console.log( Array.isArray(likeArray) );// false

// likeArray = Array.from(likeArray);
// console.log( likeArray );// ['a1', 'a2', 'a3', 'a4']

// Array.from的第二个参数是一个map函数，可选参数
likeArray = Array.from(likeArray,(item,index)=>{// map函数
    return item + 'a';
});
console.log( likeArray );// ['a1a', 'a2a', 'a3a', 'a4a']

</script>
</body>
</html>